<!--
 * @Author: zheguo 3188606474@qq.com
 * @Date: 2024-04-24 21:55:52
 * @LastEditors: zheguo 3188606474@qq.com
 * @LastEditTime: 2024-04-24 22:41:23
 * @FilePath: \projectOne\myapp\src\components\admin\admin_data.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="admin_table">

        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="id" label="id" width="100" />
            <el-table-column prop="username" label="username" width="220">
                <template #default="scope">
                    <el-popover effect="light" trigger="hover" placement="top" width="auto">
                        <template #default>
                            <div>username: {{ scope.row.username }}</div>
                        </template>
                        <template #reference>
                            <el-tag>{{ scope.row.username }}</el-tag>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="password" label="password" width="220" />
            <el-table-column prop="identify" label="identify" width="220" />
            <el-table-column prop="createdAt" label="创建时间" width="300" />
            <el-table-column prop="updatedAt" label="更新时间" width="300" />
            <el-table-column prop="remarks" label="备注" width="220" />
            <el-table-column fixed="right" label="操作" width="150">
                <template #default="scope">
                    <el-button plain type="primary" size="small" @click="handleClick(scope.row)">
                        编辑
                    </el-button>
                    <el-button type="danger" size="small" @click="handledelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-dialog v-model="dialogFormVisible" title="请编辑你的内容" width="600">
            <el-form :model="form">
                <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-input v-model="form.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="验证码" :label-width="formLabelWidth">
                    <el-input v-model="form.identify" autocomplete="off" />
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="form.remarks" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button>返回</el-button>
                    <el-button type="primary" @click="handlieSubmit()">
                        修改
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import axios from 'axios';
import { onBeforeMount, ref, reactive } from 'vue';
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
    id: "",
    username: "",
    password: "",
    identify: "",
    remarks: ""
})
const tableData = ref([])
onBeforeMount(async () => {
    await axios.get(`http://localhost:3030/adminLogin/admin/alldata`).then(res => {
        console.log(res.data)
        for (var i = 0; i < res.data.length; i++) {
            let update = new Date(res.data[i].updatedAt)
            let created = new Date(res.data[i].createdAt)
            var uptime = update.getFullYear() + "年" + (update.getMonth() + 1) + "月" + ("0" + update.getDate()).slice(-2) + "日" + "-" + (update.getHours()) + "时" + (update.getMinutes()) + "分"

            var creatime = created.getFullYear() + "年" + (created.getMonth() + 1) + "月" + ("0" + created.getDate()).slice(-2) + "日" + "-" + (created.getHours()) + "时" + (created.getMinutes()) + "分"

            res.data[i].updatedAt = uptime
            res.data[i].createdAt = creatime
            tableData.value.push(res.data[i])
        }
    })
})

const handleClick = (row) => {
    dialogFormVisible.value = true

    Object.assign(form, row)
}

const handledelete = async (row) => {
    var boolen = confirm("你确定删除该数据吗")

    if (boolen) {
        await axios.get(`http://localhost:3030/adminLogin/delete?id=${row.id}`).then(res => {
            if (res.data.ok === 1) {
                location.reload();
            } else {
                alert("删除失败")
            }
        })
    } else {
        console.log("你没有修改任何数据")
    }

}
const handlieSubmit = async () => {
    // console.log(form)
    await axios({
        method: "POST",
        url: "http://localhost:3030/adminLogin/updated",
        data: {
            username: form.username,
            password: form.password,
            identify: form.identify,
            id: form.id,
            remarks: form.remarks
        }
    }).then(res => {
        if (res.data.ok === 1) {
            location.reload();
        } else {
            alert("更新失败")
        }
    })
}
</script>